<template>
  <div class="toolbar" :class="galaxyCore.store.theme">
    <div class="toolbar-btn" @click="handleBack">
      <span class="icon iconfont icon-leftarrow"></span>
    </div>
    <div class="toolbar-btn" @click="handleReset">
      <span class="label">重置图表</span>
    </div>
    <div class="zoom-controls">
      <div class="toolbar-btn" @click="handleZoomIn">
        <span class="icon iconfont icon-zoom-in"></span>
      </div>
      <div class="toolbar-btn" @click="handleZoomOut">
        <span class="icon iconfont icon-zoom-out"></span>
      </div>
    </div>
    <div class="toolbar-btn" @click="handleMoveToCenter">
      <span class="icon iconfont icon-centerfocusweak"></span>
    </div>
    <div class="toolbar-btn" @click="handleToggleTheme">
      <span v-if="galaxyCore.store.theme === 'light'" class="icon iconfont icon-Daytimemode"></span>
      <span v-else class="icon iconfont icon-nightmode"></span>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import galaxyCore from '../index';

const router = useRouter();

// 工具栏操作
const handleBack = () => {
  router.back();
};

const handleReset = () => {
  galaxyCore.reset();
};

const handleZoomIn = () => {
  galaxyCore.zoomIn();
};

const handleZoomOut = () => {
  galaxyCore.zoomOut();
};

const handleMoveToCenter = () => {
  galaxyCore.moveToViewCenter();
};

const handleToggleTheme = () => {
  galaxyCore.toggleTheme();
};

onMounted(() => {
  
});
</script>

<style lang="scss" scoped>
.toolbar {
  position: absolute;
  top: calc(var(--statusbar-height) + 16px);
  left: 16px;
  padding: 4px 8px;
  border-radius: 30px;
  background-color: var(--c-bg-content-color);
  border: 1px solid var(--c-border-color-3);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 9998;

  .toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 24px;
    cursor: pointer;

    &:hover {
      background-color: var(--c-bg-hover-color);
    }

    &.active {
      background-color: var(--primary-background-color-hover);
      color: var(--text-primary-color);
    }

    .icon {
      font-size: 18px;
    }
    .label {
      font-size: 12px;
    }
  }

  .view {
    display: flex;
    align-items: center;

    .scale-text {
      font-size: 12px;
      width: 34px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>